<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threepipe Examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
        }

        :root {
            --primary-color: #6d7a8c;
            --secondary-color: #ec630a;
            --background-color: #E7EFF8;
            --background-color-search: #dae1ea;
            --background-color-search-hover: #c3d4e7;
            --text-color: #1C2026;
            --text-color-accent: #2b313a;
            --text-color-hover: #2b313a;

            --foreground-active: hsl(0, 1%, 17%);
            --luminosity-hover: hsl(220 60% 95% / 0.1);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #b6bfcb;
                --secondary-color: #ec630a;
                --background-color: #1C2026;
                --background-color-search: #3e4550;
                --background-color-search-hover: #555e6b;
                --text-color: #F6F7F9;
                --text-color-accent: #d2d3d5;
                --text-color-hover: #d2d3d5;

                --foreground-active: hsl(0 0% 94%);
                --luminosity-hover: hsl(220 60% 95% / 0.1);
            }
        }

        .root-container {
            position: relative;
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }

        .hamburger {
            position: absolute;
            background: transparent;
            border: none;
            top: 0.25rem;
            right: 0.5rem;
            font-size: 1.75rem;
            padding: 0.5rem;
            color: var(--text-color);
            cursor: pointer;
        }

        .hamburger:hover {
            color: var(--text-color-hover);
        }

        .sidebar, .codebar {
            height: 100%;
            background: var(--background-color);
            color: var(--text-color);
            box-sizing: border-box;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            position: relative;
        }

        .sidebar {
            padding: 1rem 1rem;
            transition: width 0s ease-in-out;
            width: min(320px, 30%);
        }

        .sidebar h1 {
            color: var(--text-color);
            margin: 0;
            font-weight: normal;
            padding: 0;
            font-size: 20px;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .sidebar a.brand-link{
            //background: linear-gradient(to right, rgb(231, 7, 7), rgb(91, 34, 203), rgb(7, 108, 211));
            //background: linear-gradient(to right, var(--secondary-color), var(--secondary-color), rgb(231, 7, 7));
            //-webkit-background-clip: text;
            //-webkit-text-fill-color: transparent;
            color: var(--text-color);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease-in-out;
            //font-style: italic;
        }
        a.brand-link{
            //background: linear-gradient(to right, rgb(231, 7, 7), rgb(91, 34, 203), rgb(7, 108, 211));
            //background: linear-gradient(to right, var(--secondary-color), var(--secondary-color), rgb(231, 7, 7));
            //-webkit-background-clip: text;
            //-webkit-text-fill-color: transparent;
            //color: var(--text-color);
            text-decoration: none;
        }
        a.brand-link.webgi-link::after {
            content: url();
            margin: 0 3px 0 5px;
            filter: invert(1);
        }
        .github-link{
            font-size: 14px;
            text-decoration: none;
            color: var(--primary-color);
            transition: color 0.2s ease-in-out;
            height: 20px; display: flex; align-items: center; gap: 4px; margin-top: 4px;
        }

        .sidebar h1 a:hover {
            color: var(--text-color-accent);
        }

        .sidebar h2 {
            font-size: 16px;
            margin: 0 0 0.5rem 0;
            font-weight: 600;
            text-transform: uppercase;
            padding: 0;
        }

        .sidebar ul {
            font-size: 14px; list-style: none;
            padding: 0 0 0 0; margin: 0 0 1rem;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sidebar ul li {
            position: relative;
            display: flex;
            font-weight: 400;
        }
        .sidebar ul li .hov-btn{
            box-sizing: border-box;
            cursor: pointer;
            position: absolute;
            top: 0; bottom: 0; right: 0;
            margin: auto 0; padding: 4px;
            height: 20px; width: 20px;
            font-size: 12px;
            display: flex; align-items: center; justify-content: center;
            transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
            opacity: 0;
        }
        .sidebar ul li:hover .hov-btn{
            opacity: 1;
        }
        .sidebar ul li.selected-li .delete-btn{
            display: none;
        }

        .sidebar ul li .hov-btn:hover{
            background-color: var(--luminosity-hover);
            color: var(--foreground-active);
        }

        .sidebar ul li a {
            color: var(--primary-color);
            text-underline-offset: 0.25rem;
            text-decoration: none;
            font-weight: 400;
            transition: color 0.2s ease-in-out, font-weight 0.1s ease-in-out, background-size 0.75s;
            background: linear-gradient(to right, rgb(231, 7, 7), rgb(91, 34, 203), rgb(7, 108, 211)) no-repeat 0 100%;
            background-size: 0 0;
            padding-bottom: 2px;
        }

        .sidebar ul li a:hover {
            color: var(--text-color-accent);
            //font-weight: 600;
        }

        .sidebar ul li a.selected {
            color: var(--text-color-hover);
            font-weight: 600;
            background-size: 100% 0.1em;
            //text-decoration: underline;
        }

        .iframe-container {
            flex: 1; height: 100%; overflow: hidden;
        }

        .iframe-container iframe {
            width: 100%; height: 100%;
            border: none;
        }

        .header-title{
            display: flex; gap: 8px;
        }

        .closed > ul, .closed > .header-title, .closed > h2 {
            display: none;
        }

        .closed.sidebar{
            padding: 1.75rem;
            width: 3.3rem;
            transition: width 0.2s ease-in-out;
        }
        .closed:before{
            content: attr(data-selected-example);
            position: absolute;
            top: 40px; left: 0;
            height: calc(100% - 40px);
            width: 3.3rem;
            color: var(--primary-color);
            font-size: 1.25rem;
            text-align: center; vertical-align: middle;
            line-height: 3.25rem;
            writing-mode: vertical-lr;
            text-orientation: upright; text-transform: uppercase;
            font-family: "Source Code Pro", Menlo, Courier, monospace;
        }

        .closed > .search-bar {
            display: none;
        }
        .search-bar{
            box-sizing: border-box;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 100%;
            background: transparent;
            position: relative;
        }
        .search-bar input{
            box-sizing: border-box;
            width: 100%; padding: 0.5rem;
            color: var(--text-color-accent);
            background: var(--background-color-search);
            border: none; border-radius: 4px;
            transition: all 0.2s ease-in-out;
        }
        .search-bar input:hover {
            background: var(--background-color-search-hover);
        }
        .search-bar input:focus {
            background: var(--background-color-search-hover);
            color: var(--text-color-hover);
            outline: none;
        }
        .search-bar input::placeholder {
            color: var(--primary-color);
        }
        .search-icon {
            position: absolute;
            top: 50%; left: 10px;
            transform: translateY(-50%);
            color: var(--primary-color);
            width: 15px; height: 15px;
        }

        .search-bar input {
            padding-left: 2rem;
        }

        .tp-logo{
            width: 80px;
            height: 80px;
            vertical-align: middle;
            filter: saturate(0.75);
            transition: filter 0.2s ease-in-out;
            margin-left: -10px;
            //margin-right: -10px;
        }
        .tp-logo:hover{
            filter: saturate(1);
        }


        .github-icon{
            //position: absolute; right:-1.25rem;
            //top: 0.1rem;
            fill: #eeeeee; cursor: pointer;
        }

        @media only screen and (max-width: 768px) {
            .root-container {
                flex-direction: column;
            }
            .sidebar{
                width: 100%;
                height: auto;
                max-height: 50%;
                padding: 1rem;
                position: relative;
            }
            .closed.sidebar{
                width: 100% !important;
            }
            .hamburger{
                padding: 0.5rem 0.25rem;
            }
            .closed .hamburger{
                padding: 0.25rem;
            }
            .closed:before{
                top: 0;
                width: 100%;
                height: 3rem;
                writing-mode: unset;
                text-orientation: unset;
            }
            .codebar, .panes-separator{
                display: none;
            }

        }

    </style>

    <link rel="stylesheet" href="./_index/editor/editor.css">

    <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-untar@2.0.0/build/dist/untar.min.js"></script>

    <script src="https://unpkg.com/monaco-editor@0.52.2/min/vs/loader.js"></script>
    <script src="https://unpkg.com/monacopilot@1.2.7/dist/index.global.js"></script>
    <script src="https://unpkg.com/monaco-tm@0.1.0/dist/index.global.js"></script>

    <script type="module">
        import {setupCodeEditor} from "./_index/editor/setup.mjs";

        window.addEventListener('DOMContentLoaded', () => {
            const hamburger = document.querySelector('.hamburger');
            const sidebar = document.querySelector('.sidebar');
            const codebar = document.querySelector('.codebar');
            const iframe = document.querySelector('#example-iframe');
            const filterInput = document.querySelector('#filterInput');
            // todo listen to customExample changes and create tab accordingly
            const customExamples = JSON.parse(localStorage.getItem('tp-examples-custom')) ?? []
            let urlParams = new URLSearchParams(window.location.search);
            let searchTerm = urlParams.get('q');
            let allExamples = []
            let selected = null

            function updateSearch() {
                urlParams = new URLSearchParams(window.location.search);
                const filterQuery = filterInput.value.toLowerCase();
                urlParams.set('q', filterQuery);
                if(searchTerm)
                    window.history.replaceState({}, '', '?' + urlParams.toString() + window.location.hash);
                else if(filterQuery !== '')
                    window.history.pushState({}, '', '?' + urlParams.toString() + window.location.hash);

                searchTerm = filterQuery;

                const categories = Array.from(document.querySelectorAll('.category'));
                const linksPerCategory = categories.map(category => {
                    const links = Array.from(category.nextElementSibling.querySelectorAll('li'));
                    links.forEach(li => {
                        const link = li.querySelector('a');
                        const key = link.textContent.toLowerCase() + category.textContent.toLowerCase();
                        li.style.display = key.includes(searchTerm) ? '' : 'none';
                    });
                    return [category, links];
                });
                linksPerCategory.forEach(([category, links]) => {
                    category.style.display = links.some(li => li.style.display !== 'none') ? '' : 'none';
                    category.nextElementSibling.style.display = category.style.display;
                });
            }
            function createExample(example) {
                const li = document.createElement('li');
                const a = document.createElement('a');
                const loc = window.location.origin + window.location.pathname.replace('/index.html', '/');
                a.href = example.href.replace(loc, './');
                a.textContent = example.label;
                a.dataset.customId = example.id;
                li.dataset.customIdLi = example.id;
                li.appendChild(a);
                const deleteBtn = document.createElement('span');
                deleteBtn.textContent = '✕';
                deleteBtn.className = 'hov-btn delete-btn';
                deleteBtn.onclick = (ev) => {
                    ev.stopPropagation();
                    const customId = ev.target.parentElement.customIdLi;
                    customExamples.splice(customExamples.findIndex(e => e.id === customId), 1);
                    localStorage.setItem('tp-examples-custom', JSON.stringify(customExamples));
                    localStorage.removeItem(`tp-examples-custom-${customId}`);
                    ev.target.parentElement.remove();
                    updateSearch()
                }
                li.appendChild(deleteBtn);
                sidebar.querySelector('#custom-category').appendChild(li);
                return a
            }
            function addExample(example, content) {
                customExamples.push(example)
                localStorage.setItem('tp-examples-custom', JSON.stringify(customExamples));
                localStorage.setItem(`tp-examples-custom-${example.id}`, content);
                const a = createExample(example)
                a.onclick = (ev) => {
                    ev.preventDefault();
                    selectTarget(ev.target);
                }
                allExamples.push(a.href)
                selectTarget(a, true, false)
                updateSearch()
            }
            function saveExample(exampleId, content) {
                const example = customExamples.find(e => e.id === exampleId);
                if(!example){
                    console.warn(`Example with id ${exampleId} not found.`);
                    return;
                }
                localStorage.setItem(`tp-examples-custom-${example.id}`, content);
            }

            const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
            const setEditorExample = isMobile ? null : setupCodeEditor(iframe)

            function selectTarget(target, scroll = false, updateFrame = true) {
                const current = selected || sidebar.querySelector('a.selected')
                if(current) {
                    current.classList.remove('selected');
                    current.parentElement && current.parentElement.classList.remove('selected-li');
                }
                target.classList.add('selected');
                target.parentElement.classList.add('selected-li');
                sidebar.dataset.selectedExample = target.innerText;
                window.location.hash = "#" + target.getAttribute("href").slice(2);
                if(selected === target) return
                selected = target;
                if(scroll){
                    setTimeout(() => { // this is required because of autofocus
                        target.scrollIntoView({behavior: "smooth", block: "center"});
                    }, 100);
                }
                if(!updateFrame) return;
                const custom = !!target.dataset.customId
                const customContent = custom ? localStorage.getItem(`tp-examples-custom-${target.dataset.customId}`) : null
                if(!custom) {
                    if (iframe.srcdoc) iframe.removeAttribute('srcdoc');
                    if (iframe.src !== target.href) iframe.src = target.href;
                }else {
                    if(iframe.src) iframe.removeAttribute('src');
                    if(iframe.srcdoc !== customContent) {
                        iframe.srcdoc = customContent;
                    }
                }
                setEditorExample && setEditorExample(target.href, allExamples, customContent,
                    (newName, oldName, content)=> addExample({
                        id: newName,
                        label: target.textContent + newName.replace(oldName, '').replace(/-/g, ' '),
                        href: target.href.replace(oldName, newName),
                    }, content), saveExample)
            }

            hamburger.addEventListener('click', () => {
                sidebar.classList.toggle('closed');
            });
            window.addEventListener('keydown', (ev) => {
                // ignore if textarea
                if(ev.target.id === 'filterInput') {
                    if(ev.target.value !== '') return;
                }
                else if (ev.target.tagName === 'TEXTAREA' || ev.target.tagName === 'INPUT') return;
                if(ev.key === '.') {
                    ev.preventDefault();
                    codebar.classList.toggle('closed');
                }
            });
            customExamples.forEach(createExample);

            const links = sidebar.querySelectorAll('li>a'); // after creating custom examples
            const selected1 = sidebar.querySelector('a.selected');
            const examples = [...links.values().map(link=>link.href)]
            allExamples = [...examples] ///[...examples, ...customExamples.map(example => example.href)]

            links.forEach(link => {
                link.onclick = (ev) => {
                    ev.preventDefault()
                    const target = ev.target;
                    selectTarget(target);
                }
            });

            let hash = window.location.hash.slice(1);
            if(hash){
                if(!hash.endsWith('/')) hash += '/';
                const target = document.querySelector(`a[href="./${hash}"]`);
                selectTarget(target || selected1, true);
            }
            else selectTarget(selected1, true);

            if (searchTerm) filterInput.value = searchTerm;

            window.addEventListener('popstate', function() {
                urlParams = new URLSearchParams(window.location.search);
                searchTerm = urlParams.get('q') || '';
                document.querySelector('#filterInput').value = searchTerm;
                updateSearch()
            });
            filterInput.addEventListener('keyup', updateSearch);
            updateSearch()
        });
    </script>

</head>
<body>
<div class="root-container">
    <div class="sidebar" data-selected-example="Tweakpane Editor">
        <button class="hamburger"> &#9776;</button>
        <div class="header-title">
            <svg class="tp-logo" width="80" height="80" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_4015_147)">
                        <rect width="101.436" height="217.725" rx="33.5983" transform="matrix(1 0 0.00493034 0.999988 64 255.727)" fill="url(#paint0_linear_4015_147)"/>
                    </g>
                    <g filter="url(#filter1_d_4015_147)">
                        <rect width="101.436" height="326.587" rx="33.5983" transform="matrix(1 0 0.00493034 0.999988 201.59 146.863)" fill="url(#paint1_linear_4015_147)"/>
                    </g>
                    <g filter="url(#filter2_d_4015_147)">
                        <rect width="101.436" height="435.45" rx="33.5983" transform="matrix(1 0 0.00495094 0.999988 342.387 38)" fill="url(#paint2_linear_4015_147)"/>
                    </g>
                    <defs>
                        <filter id="filter0_d_4015_147" x="56.9626" y="252.933" width="122.465" height="238.01" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset dx="2.94018" dy="7.35045"/>
                            <feGaussianBlur stdDeviation="5.07181"/>
                            <feComposite in2="hardAlpha" operator="out"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4015_147"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4015_147" result="shape"/>
                        </filter>
                        <filter id="filter1_d_4015_147" x="194.552" y="144.07" width="123.002" height="346.869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset dx="2.94018" dy="7.35045"/>
                            <feGaussianBlur stdDeviation="5.07181"/>
                            <feComposite in2="hardAlpha" operator="out"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4015_147"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4015_147" result="shape"/>
                        </filter>
                        <filter id="filter2_d_4015_147" x="335.349" y="35.2068" width="123.547" height="455.733" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset dx="2.94018" dy="7.35045"/>
                            <feGaussianBlur stdDeviation="5.07181"/>
                            <feComposite in2="hardAlpha" operator="out"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4015_147"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4015_147" result="shape"/>
                        </filter>
                        <linearGradient id="paint0_linear_4015_147" x1="-4.10332" y1="15.0191" x2="99.2344" y2="25.0588" gradientUnits="userSpaceOnUse">
                            <stop offset="0.0625" stop-color="#083DFA"/>
                            <stop offset="0.788462" stop-color="#0062FC"/>
                        </linearGradient>
                        <linearGradient id="paint1_linear_4015_147" x1="-4.10332" y1="22.5286" x2="99.774" y2="29.2567" gradientUnits="userSpaceOnUse">
                            <stop offset="0.0625" stop-color="#083DFA"/>
                            <stop offset="0.788462" stop-color="#0062FC"/>
                        </linearGradient>
                        <linearGradient id="paint2_linear_4015_147" x1="-4.10332" y1="30.0382" x2="99.9642" y2="35.0935" gradientUnits="userSpaceOnUse">
                            <stop offset="0.0625" stop-color="#083DFA"/>
                            <stop offset="0.788462" stop-color="#0062FC"/>
                        </linearGradient>
                    </defs>
            </svg>

            <h1 style="position:relative;">
                <a class="brand-link" href="https://threepipe.org" style="margin-bottom: 4px;">Threepipe</a>
                <span style="font-size: 14px;">
                /examples
                </span>
                <a class="github-link" target="_blank" href="https://github.com/repalash/threepipe">
                        View on Github
                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                             width="20" height="20" viewBox="0 0 24 24"
                             class="github-icon">
                            <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z"></path>
                        </svg>
                </a>
            </h1>
        </div>

        <div class="search-bar">
            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <input id="filterInput" type="text" placeholder="Search" autocomplete="off" autofocus >
        </div>

        <h2 class="category">Editors/Viewers</h2>
        <ul>
            <li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
            <li><a href="./model-viewer/">Model Viewer </a></li>
        </ul>
        <h2 class="category">Custom</h2>
        <ul id="custom-category">
        </ul>
        <h2 class="category">Rendering</h2>
        <ul>
            <li><a href="./progressive-plugin/">Progressive Plugin </a></li>
            <li><a href="./custom-pipeline/">Custom Pipeline specification </a></li>
            <li><a href="./ssaa-plugin/">SSAA Plugin </a></li>
            <li><a href="./msaa-ssaa/">MSAA + SSAA </a></li>
            <li><a href="./viewer-render-size/">Viewer Render Size </a></li>
            <li><a href="./depth-buffer-plugin/">Depth Buffer Plugin </a></li>
            <li><a href="./normal-buffer-plugin/">Normal Buffer Plugin </a></li>
            <li><a href="./gbuffer-plugin/">GBuffer Plugin <br/>(NormalDepth+Flags) </a></li>
            <li><a href="./ssao-plugin/">SSAO Plugin </a></li>
            <li><a href="./virtual-cameras-plugin/">Virtual Cameras Plugin </a></li>
            <li><a href="./virtual-camera/">Virtual Camera (Animated) </a></li>
            <li><a href="./basic-svg-renderer-plugin/">Basic SVG Renderer Plugin </a></li>
            <li><a href="./three-svg-renderer-plugin/">Three SVG Renderer Plugin </a></li>
            <li><a href="./three-gpu-pathtracer/">Three GPU Path Tracer </a></li>
            <li><a href="./3d-tiles-renderer/">3D Tiles Renderer </a></li>
            <li><a href="./cascaded-shadows-plugin-basic/">Cascaded Shadows Plugin (CSM) </a></li>
        </ul>
        <h2 class="category">Realistic Rendering (<a class="brand-link webgi-link" href="https://webgi.dev/" target="_blank">webgi</a>)</h2>
        <ul>
            <li><a href="./bloom-plugin/">HDR Bloom Plugin </a></li>
            <li><a href="./depthoffield-plugin/">DepthOfField Plugin </a></li>
            <li><a href="./ssreflection-plugin/">Screen Space Reflection(SSR) Plugin </a></li>
            <li><a href="./temporalaa-plugin/">Temporal Anti-aliasing(TAA) Plugin </a></li>
            <li><a href="./outline-plugin/">Outline (Picking) Plugin </a></li>
            <li><a href="./ssgi-plugin/">Screen Space Global Illumination(SSGI) Plugin </a></li>
            <!--<li><a href="./ssrtao-plugin/">Screen Space Ray Traced AO Plugin </a></li>-->
            <li><a href="./anisotropy-plugin/">Anisotropy(Blender) Plugin </a></li>
            <li><a href="./velocity-buffer-plugin/">Velocity Buffer Plugin (TAA) </a></li>
            <li><a href="./sscontactshadows-plugin/">Contact Shadows(SSCS) Plugin </a></li>
            <li><a href="./advanced-ground-plugin/">Advanced Ground Plugin <br/>(Baked Shadow/Planar Reflections) </a></li>
<!--            <li><a href="./r3f-jsx-webgi/">r3f/jsx + webgi Sample </a></li>-->
            <li><a href="./r3f-tsx-webgi/">r3f/tsx + webgi Sample </a></li>
            <li><a href="./r3f-ssr-demo/">r3f Screen Space Reflections (SSR) </a></li>
            <li><a href="./fat-lines-ssr/">Fat/Mesh Lines (SSR+Shadow) </a></li>
        </ul>
        <h2 class="category">Post-Processing</h2>
        <ul>
            <li><a href="./tonemap-plugin/">Tonemap Plugin </a></li>
            <li><a href="./vignette-plugin/">Vignette Plugin </a></li>
            <li><a href="./chromatic-aberration-plugin/">Chromatic Aberration Plugin </a></li>
            <li><a href="./filmic-grain-plugin/">Filmic Grain Plugin </a></li>
            <li><a href="./frame-fade-plugin/">Frame Fade Plugin </a></li>
            <li><a href="./unreal-bloom-pass/">Unreal Bloom Pass </a></li>
        </ul>
        <h2 class="category">Interaction</h2>
        <ul>
            <li><a href="./picking-plugin/">Picking (Selection) Plugin </a></li>
            <li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) Plugin </a></li>
            <li><a href="./transform-controls-plugin/">Transform Controls Plugin </a></li>
            <li><a href="./editor-view-widget-plugin/">Editor View Widget Plugin </a></li>
            <li><a href="./loading-screen-plugin/">Loading Screen Plugin </a></li>
            <li><a href="./fullscreen-plugin/">FullScreen Plugin </a></li>
            <li><a href="./interaction-prompt-plugin/">Interaction Prompt Plugin </a></li>
            <li><a href="./object-constraints-plugin/">Object Constraints Plugin </a></li>
            <li><a href="./device-orientation-controls-plugin/">Device Orientation Controls Plugin (Gyroscope) </a></li>
            <li><a href="./pointer-lock-controls-plugin/">Pointer Lock(FPS) Controls Plugin </a></li>
            <li><a href="./three-first-person-controls-plugin/">Three First Person(look around) Controls Plugin </a></li>
            <li><a href="./simplify-modifier-plugin/">Simplify Modifier Plugin </a></li>
            <li><a href="./meshopt-simplify-modifier-plugin/">MeshOpt Simplify Modifier Plugin </a></li>
            <li><a href="./r3f-pivot-controls/">Drei Pivot Controls (r3f) </a></li>
            <li><a href="./entity-component-plugin/">Entity Component System (ECS) <br/> (Sample Body Component) </a></li>
            <li><a href="./entity-component-custom/">Entity Component System (ECS) <br/> (Custom Component) </a></li>
        </ul>
        <h2 class="category">Configurators</h2>
        <ul>
            <li><a href="./material-configurator-plugin/">Material Configurator Plugin </a></li>
            <li><a href="./switch-node-plugin/">Switch Node Plugin <br/>(Object Configurator) </a></li>
            <li><a href="./gltf-khr-material-variants-plugin/">glTF KHR Material Variants Plugin </a></li>
        </ul>
        <h2 class="category">Text</h2>
        <ul>
            <li><a href="./monkey-type-3d/">Monkey Type 3D (Mini Game) </a></li>
            <li><a href="./troika-text-plugin/">Troika Text Plugin (SDF Text) </a></li>
            <li><a href="./simple-svg-text-plane/">Dynamic Text Plane (Simple/SVG) </a></li>
            <li><a href="./troika-text-plane/">Dynamic Text Plane (Troika Text) </a></li>
            <li><a href="./troika-text-shadow/">Troika Text (2D) + Shadow </a></li>
            <li><a href="./r3f-drei-text-html/">Drei Troika Text+HTML (r3f) </a></li>
        </ul>
        <h2 class="category">Import</h2>
        <ul>
            <li><a href="./fbx-load/">FBX Load </a></li>
            <li><a href="./obj-mtl-load/">OBJ MTL Load </a></li>
            <li><a href="./gltf-load/">glTF Load </a></li>
            <li><a href="./rhino3dm-load/">Rhino 3DM Load </a></li>
            <li><a href="./drc-load/">DRACO(DRC) Load </a></li>
            <li><a href="./hdr-load/">HDR Load </a></li>
            <li><a href="./exr-load/">EXR Load </a></li>
            <li><a href="./image-load/">Image Load <br/>(png, jpeg, svg, ico, webp, avif) </a></li>
            <li><a href="./video-load/">Video Load (mp4, mov, webm) </a></li>
            <li><a href="./usdz-load/">USDZ, USDA Load </a></li>
            <li><a href="./ply-load/">PLY Load </a></li>
            <li><a href="./stl-load/">STL Load </a></li>
            <li><a href="./ktx2-load/">KTX2 Load </a></li>
            <li><a href="./ktx-load/">KTX Load </a></li>
            <li><a href="./blend-load/">BLEND Load </a></li>
            <li><a href="./splat-load/">SPLAT Load (Gaussian Splatting) </a></li>
            <li><a href="./extra-importer-plugins/">Extra Importers (3ds, 3mf, collada, amf, bvh, vox, gcode, mdd, pcd, tilt, wrl, ldraw, vtk, xyz) </a></li>
            <li><a href="./gltf-meshopt-compression/">glTF MeshOpt Decode (Compression Extension) </a></li>
            <li><a href="./gltf-mesh-lines/">glTF Mesh Lines (Fat Lines) </a></li>
            <li><a href="./gltf-spec-gloss-import">glTF pbrSpecularGlossiness <br/>(Convert/Import) </a></li>
            <li><a href="./assimpjs-plugin/">AssimpJs Plugin </a></li>
            <li><a href="./b3dm-load/">B3DM Load (3D Tile) </a></li>
            <li><a href="./i3dm-load/">I3DM Load (3D Tile) </a></li>
            <li><a href="./pnts-load/">PNTS Load (3D Points) </a></li>
            <li><a href="./cmpt-load/">CMPT Load (3D Tiles) </a></li>
            <li><a href="./dzi-load/">DZI Load (DeepZoomImage) </a></li>
            <li><a href="./slippy-map-tiles/">Slippy Map Tiles Load<br/>(OpenStreetMap ZYX) </a></li>
            <li><a href="./ogc-tiles-google-maps/">Google Maps Globe (OGC Tiles)</a></li>
            <li><a href="./ogc-tiles-google-maps-3d/">Google Maps 3D (OGC Tiles)</a></li>
            <li><a href="./file-load/">File/Blob Load</a></li>
        </ul>
        <h2 class="category">Export</h2>
        <ul>
            <li><a href="./asset-exporter-plugin/">Asset Exporter Plugin<br/>(Scene/GLB Snapshot) </a></li>
            <li><a href="./canvas-snapshot-plugin/">Canvas Snapshot Plugin<br/>(Image Snapshot) </a></li>
            <li><a href="./image-snapshot-export/">PNG, JPEG, WEBP Export<br/>(Image Snapshot) </a></li>
            <li><a href="./render-target-export/">EXR, PNG, JPEG, WEBP Export<br/>(Render Target Export) </a></li>
            <li><a href="./glb-export/">GLB Export </a></li>
            <li><a href="./gltf-export/">GLTF Export </a></li>
            <li><a href="./glb-draco-export/">GLB (+DRACO) Export </a></li>
            <li><a href="./fbx-export/">FBX Export (AssimpJs)<br/>(glTF To FBX) </a></li>
            <li><a href="./pmat-material-export/">PMAT Material Export </a></li>
            <li><a href="./transfr-share-plugin/">Transfr.one Share Plugin<br/>(Upload, share link) </a></li>
            <li><a href="./gltf-export-base-path/">GLTF Export (w/ Base Path) </a></li>
        </ul>
        <h2 class="category">UI Plugins / Config</h2>
        <ul>
            <li><a href="./tweakpane-ui-plugin/">Tweakpane UI Plugin </a></li>
            <li><a href="./blueprintjs-ui-plugin/">Blueprint.js UI Plugin </a></li>
            <li><a href="./timeline-ui-plugin/">Timeline UI Plugin (Animation) </a></li>
            <li><a href="./material-uiconfig/">Material UI </a></li>
            <li><a href="./object-uiconfig/">Object UI </a></li>
            <li><a href="./camera-uiconfig/">Camera UI </a></li>
            <li><a href="./camera-ortho-uiconfig/">Camera (Ortho) UI </a></li>
            <li><a href="./scene-uiconfig/">Scene UI </a></li>
            <li><a href="./viewer-uiconfig/">Viewer UI </a></li>
            <li><a href="./hierarchy-ui-plugin/">Hierarchy UI Plugin </a></li>
        </ul>
        <h2 class="category">Animation</h2>
        <ul>
            <li><a href="./camera-view-plugin/">Camera View (Animation) Plugin </a></li>
            <li><a href="./animation-object-plugin/">Animation Object Plugin <br/>(Property Animations) </a></li>
            <li><a href="./gltf-animation-plugin/">glTF Animation Plugin </a></li>
            <li><a href="./transform-animation-plugin/">Transform Animation Plugin </a></li>
            <li><a href="./animate-material-properties/">Animate Material Properties </a></li>
            <li><a href="./popmotion-plugin/">Popmotion Plugin </a></li>
            <li><a href="./gltf-camera-animation/">glTF Camera Animation </a></li>
            <li><a href="./gltf-animation-page-scroll/">glTF Animation Page Scroll </a></li>
            <li><a href="./animation-clip-data/">Animation Clip (glTF) Custom Data </a></li>
            <li><a href="./follow-path-constraint/">Follow Path(curve) Constraint </a></li>
        </ul>
        <h2 class="category">Framework Samples</h2>
        <ul>
            <li><a href="./html-js-sample/">HTML/JS Sample </a></li>
            <li><a href="./r3f-js-sample/">r3f/JS Sample </a></li>
<!--            <li><a href="./r3f-jsx-sample/">r3f/jsx Sample </a></li>-->
            <li><a href="./r3f-tsx-sample/">r3f/tsx Sample </a></li>
            <li><a href="./r3f-router-transitions-demo/">r3f React Router Sample </a></li>
            <li><a href="./react-js-sample/">React/JS Sample </a></li>
<!--            <li><a href="./react-jsx-sample/">React/jsx Sample </a></li>-->
            <li><a href="./react-tsx-sample/">React/tsx Sample </a></li>
            <li><a href="./vue-html-sample/">Vue/HTML Sample </a></li>
            <li><a href="./vue-sfc-sample/">Vue/SFC Sample </a></li>
            <li><a href="./svelte-sample/">Svelte 4 Sample </a></li>
        </ul>
        <h2 class="category">Material Extensions</h2>
        <ul>
            <li><a href="./clearcoat-tint-plugin/">Clearcoat Tint Plugin</a></li>
            <li><a href="./fragment-clipping-extension-plugin/">Fragment Clipping Extension Plugin </a></li>
            <li><a href="./noise-bump-material-plugin/">SparkleBump(NoiseBump) Material Plugin </a></li>
            <li><a href="./custom-bump-map-plugin/">Custom Bump Map Plugin </a></li>
            <li><a href="./parallax-mapping-plugin/">Parallax(Relief) Mapping Plugin </a></li>
        </ul>
        <h2 class="category">Utils / Experiments</h2>
        <ul>
            <li><a href="./contact-shadow-ground-plugin/">Contact Shadow Ground Plugin</a></li>
            <li><a href="./hdri-ground-plugin/">HDRi Ground Plugin <br/>(Projected Skybox)</a></li>
            <li><a href="./render-target-preview/">Render Target Preview Plugin </a></li>
            <li><a href="./object3d-generator-plugin/">Object3D Generator Plugin <br/>(Lights, Cameras)</a></li>
            <li><a href="./geometry-generator-plugin/">Geometry Generator Plugin </a></li>
            <li><a href="./object3d-widgets-plugin/">Object3D Widgets Plugin <br/>(Lights, Cameras Helpers)</a></li>
            <li><a href="./line-helper-widget/">Line Helper Widget <br/>(Spline Editor)</a></li>
            <li><a href="./skeleton-helper-widget/">Skeleton Helper Widget <br/>(Bones Skeleton)</a></li>
            <li><a href="./bone-helper-widget/">Bone Helper Widget <br/>(Single Bone)</a></li>
            <li><a href="./watch-hands-plugin/">Watch Hands Plugin (webgi) </a></li>
            <li><a href="./ssgi-ssr-plugin/">SSGI + SSR Plugins (webgi) </a></li>
            <li><a href="./geometry-uv-preview/">Geometry UV Preview Plugin </a></li>
            <li><a href="./aws-client-plugin/">AWS Client Plugin <br/>(S3/R2 upload) </a></li>
            <li><a href="./parallel-asset-import/">Parallel Asset Import </a></li>
            <li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
            <li><a href="./3dm-to-glb/">Convert 3DM to GLB </a></li>
            <li><a href="./hdr-to-exr/">Convert HDR to EXR </a></li>
            <li><a href="./fat-lines/">Fat Lines (Mesh Lines) </a></li>
            <li><a href="./fat-line-spiral/">Line Spiral (Mesh Lines) </a></li>
            <li><a href="./progressive-hdr-shadows-exp/">Progressive HDR Environment Shadows</a></li>
            <li><a href="./multi-render-uv-clip/">Multi-render UV clipping <br/> (Material Extension) </a></li>
            <li><a href="./svg-geometry-playground/">SVG Geometry Playground </a></li>
            <li><a href="./stencil-clipping-portal/">Stencil Clipping Portal </a></li>
            <li><a href="./stencil-picking-outline/">Stencil Picking Outline </a></li>
            <li><a href="./flickity-carousel/">Flickity Image Carousel </a></li>
            <li><a href="./three-csm-basic/">Three CSM (Cascaded Shadows) </a></li>
            <li><a href="./sky-shader-simple/">Sky Shader (Simple) </a></li>
            <li><a href="./sky-shader-simple-ts/">Sky Shader TS (Simple) </a></li>
        </ul>
        <h2 class="category">Shaders</h2>
        <ul>
            <li><a href="./screen-shader/">Basic Screen Shader </a></li>
            <li><a href="./screen-shader-advanced/">Advanced Screen Shader </a></li>
            <li><a href="./screen-shader-material/">Screen Shader Material </a></li>
            <li><a href="./screen-pass-extension/">Screen Pass Extension </a></li>
            <li><a href="./screen-pass-extension-plugin/">Screen Pass Extension Plugin </a></li>
            <li><a href="./shadertoy-player/">ShaderToy Player </a></li>
        </ul>
        <h2 class="category">Lights</h2>
        <ul>
            <li><a href="./directional-light/">Directional Light </a></li>
            <li><a href="./spot-light/">Spot Light </a></li>
            <li><a href="./point-light/">Point Light </a></li>
            <li><a href="./ambient-light/">Ambient Light </a></li>
            <li><a href="./hemisphere-light/">Hemisphere Light </a></li>
            <li><a href="./rect-area-light/">Rect Area Light </a></li>
        </ul>
        <h2 class="category">Tests</h2>
        <ul>
            <li><a href="./multi-viewer-test/">Multiple Viewers Test </a></li>
            <li><a href="./gltf-transmission-test/">glTF Transmission Test </a></li>
            <li><a href="./gltf-transmission-test-msaa/">glTF Transmission Test + MSAA </a></li>
            <li><a href="./uint8-rgbm-hdr-test/">Uint8 RGBM HDR Test </a></li>
            <li><a href="./half-float-hdr-test/">Half-float HDR Test </a></li>
            <li><a href="./sphere-rgbm-test/">RGBM Test </a></li>
            <li><a href="./sphere-half-float-test/">Half-float Test </a></li>
            <li><a href="./sphere-msaa-test/">MSAA Test </a></li>
            <li><a href="./z-prepass/">Z-Prepass Test </a></li>
            <li><a href="./import-test/">Import Test</a></li>
            <li><a href="./js-image-data-test/">JS ImageData Test</a></li>
            <li><a href="./gltf-transmission-test-msaa-zprepass/">glTF Transmission Test + MSAA + zPrepass</a></li>
            <li><a href="./dispose-reimport-test/">Dispose + Reimport (URL)</a></li>
            <li><a href="./dispose-reimport-test-2/">Dispose + Reimport (URL, Root)</a></li>
            <li><a href="./dispose-reimport-test-3/">Dispose + Reimport 2 (URL, Root)</a></li>
            <li><a href="./reimport-duplicate-test/">Reimport Duplicate (URL, Root)</a></li>
            <li><a href="./clear-reimport-test/">Clear + Reimport (URL, Root)</a></li>
            <li><a href="./clear-reimport-test-2/">Clear + Reimport 2 (URL, Root)</a></li>
            <li><a href="./theatrejs-plugin/">TheatreJs UI Plugin (Incomplete)</a></li>
            <li><a href="./instanced-mesh/">Instanced Mesh Demo </a></li>
            <li><a href="./r3f-diamond-caustics-demo/">r3f Diamond Caustics </a></li>
            <li><a href="./r3f-spline-glass-demo/">r3f Spline Glass </a></li>
            <li><a href="./r3f-drei-transform-controls/">Drei Transform Controls (r3f) </a></li>
        </ul>
    </div>
    <div class="codebar closed left-pane">
        <div class="codefiles">
            <div class="codefiles-tabs"></div>
            <div class="codefiles-actions">
                <div class="codefiles-action" id="codefiles-action-format">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="1em" height="1em"><path d="M10.33 1.67h-8c-.45-.02-.43-.67 0-.67h8c.44 0 .46.64 0.67.67m-8 2.66c-.45-.02-.43-.66 0-.66H7c.44 0 .45.64 0.66.66zM5.67 3c-.46-.02-.44-.66 0-.67h6.66c.44.01.46.65 0 .67zm5.33.67c.44 0 .45.64 0 .66H8.33c-.45-.02-.43-.66 0-.66zm1.33.66c-.45-.02-.43-.66 0-.66H13c.44 0 .45.64 0 .66zm-10 1.34c-.45-.02-.43-.67 0-.67h1.34c.43 0 .45.64 0 .67zm8 0c-.45-.02-.43-.67 0-.67h3.34c.43 0 .45.64 0 .67zM5 5.67C4.55 5.65 4.57 5 5 5h.67c.43 0 .45.64 0 .67zm-2.67 8c-.45-.02-.43-.67 0-.67h1.34c.43 0 .45.64 0 .67zm2.67 0c-.45-.02-.43-.67 0-.67h.67c.43 0 .45.64 0 .67zM10.33 7c-.45-.02-.43-.66 0-.67h3.34c.43.01.45.65 0.67.67zm-8 0c-.45-.02-.43-.66 0-.67h3.34c.43.01.45.65 0 .67zm0 5.33c-.45-.02-.43-.66 0-.66h3.34c.43 0 .45.64 0 .66zm0 2.67c-.45-.02-.43-.66 0-.67h3.34c.43.01.45.65 0 .67zm0-6.67c-.45-.02-.43-.66 0-.66H3c.44 0 .45.64 0 .66zm2 0c-.45-.02-.43-.66 0-.66h2c.44 0 .46.64 0 .66zm3.34 0c-.46-.02-.44-.66 0-.66H13c.44 0 .45.64 0 .66zm2.66 1.34c-.45-.02-.43-.67 0-.67h2c.44 0 .46.64 0 .67zm-4 0c-.45-.02-.43-.67 0-.67H9c.44 0 .45.64 0 .67zm-4 0c-.45-.02-.43-.67 0-.67H5c.44 0 .45.64 0 .67zm0 1.33c-.45-.02-.43-.66 0-.67H3c.44.01.45.65 0 .67zm2 0c-.45-.02-.43-.66 0-.67h6c.44.01.46.65 0 .67zm-2-8c-.45-.02-.43-.66 0-.67h2c.44.01.46.65 0 .67z"></path></svg>
                </div>
                <div class="codefiles-action" id="codefiles-action-run">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25em" height="1.25em" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.681 3H2V2h3.5l.5.5V6H5V4a5 5 0 1 0 4.53-.761l.302-.954A6 6 0 1 1 4.681 3" clip-rule="evenodd"></path></svg>
                </div>
            </div>
        </div>
        <div class="codebox"></div>
    </div>
    <div class="panes-separator"><div class="panes-separator-line"></div></div>
    <div class="iframe-container right-pane">
        <!-- TODO: allow only threepipe and localhost domains -->
        <iframe id="example-iframe" src="https://threepipe.org/examples/tweakpane-editor/" frameborder="0" allowfullscreen="allowfullscreen"
                allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *">
        </iframe>
    </div>
</div>
</body>
